<template>
    <div class="totalbox">
        <div class="aside">
            <div class="aside-top">
                <div style="height: 180px;">
                    <div style="margin: 0 auto;width: 100px;height:120px;">
                        <img :src=tableData[0].photo style="margin-top: 10px;height: 100px;width: 100px;" />
                    </div>
                    <div style="text-align: center;">{{ tableData[0].nickname }}</div>
                    <div>
                        <div style="margin: 0 auto;width: 100px;text-align: center;border-radius: 100px;background-color: black;color: rgb(249, 210, 55);">
                        {{  tableData[0].vipcard}}
                        </div>
                    </div>
                </div>

            </div>
            <div class="aside-bottom">
                <div
                    style="height: 30%;width: 80%;border-radius: 8px;background-color: aliceblue;margin: 0 auto;margin-bottom:20px;box-sizing: border-box;border: 1px solid white;">
                    <div style="font-weight: 700;font-style: normal;font-size: 16px;color: #CC9900;margin: 30px 10px;">
                        No.{{ tableData[0].vipcard }}</div>
                    <div style="display: flex;">
                        <div style="width: 33%;text-align: center;font-weight: 700;">{{ tableData[0].currentBalance }}</div>
                        <div style="width: 33%;text-align: center;font-weight: 700;">￥{{ tableData[0].totalBalance }}</div>
                        <div style="width: 33%;text-align: center;font-weight: 700;">100次</div>
                    </div>
                    <div style="display: flex;">
                        <div style="width: 33%;text-align: center;color: #A1A1A1;">当前余额</div>
                        <div style="width: 33%;text-align: center;color: #A1A1A1;">累计余额</div>
                        <div style="width: 33%;text-align: center;color: #A1A1A1;">累计充值</div>
                    </div>
                </div>
                <div
                    style="height: 20%;width: 80%;border-radius: 8px;background-color: aliceblue;margin: 0 auto;margin-bottom:20px;box-sizing: border-box;padding-top: 20px;">
                    <div
                        style="width: 60px;border-bottom-right-radius: 50px;border-top-right-radius: 50px ;color:white;background-color: #1FAC68;text-align: right;">
                        积分&nbsp;</div>
                    <div style="display: flex;margin-top: 10px;">
                        <div style="width: 50%;text-align: center;font-weight: 700;">{{ tableData[0].currentIntegral }}</div>
                        <div style="width: 50%;text-align: center;font-weight: 700;">{{tableData[0].totalIntegral}}</div>
                    </div>
                    <div style="display: flex;margin-top: 5px;">
                        <div style="width: 50%;text-align: center;">当前积分</div>
                        <div style="width: 50%;text-align: center;">累计积分</div>
                    </div>
                </div>
                <div
                    style="height: 20%;width: 80%;border-radius: 8px;background-color: aliceblue;margin: 0 auto;margin-bottom:20px;box-sizing: border-box;padding-top: 20px;">
                    <div
                        style="width: 60px;border-bottom-right-radius: 50px;border-top-right-radius: 50px ;color:white;background-color: #DF5152;text-align: right;">
                        优惠券&nbsp;</div>
                    <div style="display: flex;margin-top: 10px;">
                        <div style="width: 33%;text-align: center;font-weight: 700;">10张</div>
                        <div style="width: 33%;text-align: center;font-weight: 700;">0张</div>
                        <div style="width: 33%;text-align: center;font-weight: 700;">1张</div>
                    </div>
                    <div style="display: flex;margin-top: 5px;">
                        <div style="width: 33%;text-align: center;">未使用</div>
                        <div style="width: 33%;text-align: center;">已使用</div>
                        <div style="width: 33%;text-align: center;">已过期</div>
                    </div>
                </div>

            </div>
        </div>
        <div class="main">
            <div style="height: 54px;"></div>
            <div class="main-body">
                <div class="body-aside">
                    <div style="height: 20%;"></div>
                    <div :class="[selected == 0 ? 'active' : '']" @click="changeactive(0)">
                        基本信息
                    </div>
                    <div :class="[selected == 1 ? 'active' : '']" @click="changeactive(1)">
                        交易明细
                    </div>
                    <div :class="[selected == 2 ? 'active' : '']" @click="changeactive(2)">
                        余额明细
                    </div>
                    <div :class="[selected == 3 ? 'active' : '']" @click="changeactive(3)">
                        积分明细
                    </div>
                </div>
                <div class="body-main">
                    <component :is="currentComponent"></component>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import Jiaoyimingxi from './huiyuanxiangqing/Jiaoyimingxi.vue';
import Jibenxinxi from './huiyuanxiangqing/Jibenxinxi.vue';
import Jifenmingxi from './huiyuanxiangqing/Jifenmingxi.vue';
import Yuemingxi from './huiyuanxiangqing/Yuemingxi.vue';
import { ref } from 'vue';
import { getnumberinfodetail } from '../../api/membersettingApi'

import { useCounterStore } from '@/stores/counter'
import { storeToRefs } from 'pinia'
const store = useCounterStore()
const { count } = storeToRefs(store)
interface user{
    currentBalance: number
    currentIntegral: number
    id: number
    nickname: string
    photo: string
    totalBalance: number
    totalIntegral: number
    totalRechargeTimes: number
    vipcard: number
}
let tableData = reactive([{
    currentBalance: 1000,
    currentIntegral: 154,
    id: 1,
    nickname: "lixiang",
    photo: "https://n2.hdfimg.com/g7/M09/9A/B0/zYYBAGQnnxSAKmgjAAFtT_mmf5g329_200_200_1.jpg?080c",
    totalBalance: 2000,
    totalIntegral: 100,
    totalRechargeTimes: 3,
    vipcard: 451513,
}
])

let getdata = async () => {
    let get = await getnumberinfodetail({
        id: count.value,

    })
    if (get) {
        tableData.length = 0
        tableData.push(...get.data.data)
       
    }
}
getdata()
// let isSelected1 = ref(false);
// let isSelected2 = ref(false);
// let isSelected3 = ref(false);
// let isSelected4 = ref(false);
const selected = ref(0)
const currentComponent = ref(Jibenxinxi);

const changeactive = (comName: any) => {
    selected.value = comName;
    switch (comName) {
        case 0:
            currentComponent.value = Jibenxinxi;
            break;
        case 1:
            currentComponent.value = Jiaoyimingxi;
            break;
        case 2:
            currentComponent.value = Yuemingxi;
            break;
        case 3:
            currentComponent.value = Jifenmingxi;
            break;
    }
    // isSelected1.value = comName === 'Jibenxinxi';
    // isSelected2.value = comName === 'Jiaoyimingxi';
    // isSelected3.value = comName === 'Yuemingxi';
    // isSelected4.value = comName === 'Jifenmingxi';
};
</script>
<style scoped>
.totalbox {
    height: 700px;
    border-radius: 8px;

    display: flex;
}

.aside {
    width: 30%;
    height: 100%;
    background-color: rgb(249, 210, 55);
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.main {
    width: 70%;
    height: 100%;
}

.main-body {
    height: calc(100% - 54px);
    display: flex;
    border-top: 1px solid color(srgb 0.9 0.9 0.9);
    border-width: 1px;
}

.body-aside {
    width: 20%;
    height: calc(100% - 1px);
    background-color: rgb(242, 242, 242);

}

.aside-top {
    height: 25%
}

.aside-bottom {
    height: 75%;

}

.body-aside div {
    height: 40px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
}

.active {
    height: 40px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    background-color: white;
    color: #FEBE43;
}

.body-main {
    width: 80%;
}
</style>